<template>
  <div class="paytype">
    <div class="left">
      <div><h2>计费管理 / 缴费类性管理</h2></div>
      <div class="left_search">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="">
            <el-input
              v-model="formInline.paymoney"
              placeholder="项目价格"
            ></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="formInline.paystatus" placeholder="通知状态">
              <el-option label="已通知" :value="1"></el-option>
              <el-option label="未通知" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-tree
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        ref="tree"
        @node-click="getTableData"
      >
      </el-tree>
    </div>
    <div class="right">
      <div class="btns">
        <h2>{{ rightTitle }}</h2>
        <div>
          <el-button
            size=""
            type="primary"
            icon="el-icon-search"
            @click="onSearch"
            >查询</el-button
          >
          <el-button type="success" icon="el-icon-plus" @click="addToPayAdd"
            >新增</el-button
          >
          <el-button type="primary" icon="el-icon-refresh" @click="reserve"
            >刷新</el-button
          >
          <el-button type="primary" icon="el-icon-top" @click="tableExport"
            >导出</el-button
          >
        </div>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          v-loading="loading"
          stripe
          height="450px"
          style="width: 100%"
        >
          <el-table-column
            align="center"
            prop="payname"
            label="缴费项目名称"
            width=""
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="paylevel"
            label="缴费项目优先级"
            width=""
          >
          </el-table-column>
          <el-table-column align="center" prop="paynum" label="项目用量/时长">
          </el-table-column>
          <el-table-column
            align="center"
            prop="paymoney"
            sortable
            label="项目价格"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="paytime"
            sortable
            label="创建时间"
          >
            <template slot-scope="scope">
              <span> {{ scope.row.paytime.split("T")[0] }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="username" label="通知人">
          </el-table-column>
          <el-table-column align="center" prop="paystatus" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.paystatus == 2">未通知</span>
              <span v-if="scope.row.paystatus == 1">已通知</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="210px" prop="" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="openDialog(scope.row, scope.$index)"
                plain
                >通知</el-button
              >
              <el-button
                size="mini"
                type="primary"
                @click="detailToAdd(scope.row)"
                plain
                >查看</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="clearRow(scope.row, scope.$index)"
                plain
                >作废</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNumber"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="dialog">
      <el-dialog
        title="计费通知"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <div class="dialog_search">
          <el-form
            :inline="true"
            :model="dialogInline"
            class="demo-form-inline"
          >
            <el-form-item label="">
              <el-input
                v-model="dialogInline.admin"
                placeholder="请输入用户账号"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="dialogSearch"
              ></el-button>
              <el-button type="warning" @click="dialogClearForm"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="dialog_list">
          <el-table
            :data="diaTable"
            border
            style="width: 100%"
            highlight-current-row
            @current-change="dialogRowChange"
          >
            <el-table-column type="index" label="序号" width="">
            </el-table-column>
            <el-table-column prop="username" label="用户账号" width="">
            </el-table-column>
            <el-table-column prop="homeaddress" label="家庭住址" width="200px">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.homeaddress"
                  placement="top-start"
                >
                  <span class="dia_limWidth">{{ scope.row.homeaddress }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 1">管理员</span>
                <span v-if="scope.row.type == 2">普通用户</span>
              </template>
            </el-table-column>
            <el-table-column prop="coststatus" label="缴费状态" width="">
              <template slot-scope="scope">
                <span v-if="scope.row.coststatus == 1">已缴费</span>
                <span v-if="scope.row.coststatus != 1">未缴费</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="dialog_page" style="text-align: right">
          <el-pagination
            @size-change="dialogSizeChange"
            @current-change="dialogCurrentChange"
            :current-page="dialogPageNumber"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="dialogPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="dialogTotal"
          >
          </el-pagination>
        </div>
        <div style="text-align: right">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="inform">通知</el-button>
          </span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { downloadXlsx } from "../../../../utils/xlsx";
export default {
  data() {
    return {
      //行id
      rowId: "",
      //对话框分页
      dialogTotal: 0,
      dialogPageSize: 10,
      dialogPageNumber: 1,
      //对话框表格
      diaTable: null,
      //对话框搜索
      dialogInline: {
        admin: "",
      },
      //对话框控制
      dialogVisible: false,
      //加载状态
      loading: false,
      //分页
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      //表id
      c_id: 7,
      //右侧标题
      rightTitle: "电费目录表",
      //表格数据
      tableData: null,
      //左侧搜索
      formInline: {
        paymoney: "",
        paystatus: "",
      },
      //树形选择数据
      data: [
        {
          id: 1,
          label: "缴费项目",
          children: [
            {
              id: 2,
              label: "电费项目",
              children: [
                {
                  id: 7,
                  label: "电费目录表",
                },
              ],
            },
            {
              id: 3,
              label: "水费项目",
              children: [
                {
                  id: 8,
                  label: "水费固定月目录表",
                },
                {
                  id: 9,
                  label: "水费按量计价目录表",
                },
              ],
            },
            {
              id: 4,
              label: "天然气项目",
              children: [
                {
                  id: 10,
                  label: "天然气目录表",
                },
              ],
            },
            {
              id: 5,
              label: "物业费项目",
              children: [
                {
                  id: 11,
                  label: "物业费目录表",
                },
              ],
            },
            {
              id: 6,
              label: "宽带费项目",
              children: [
                {
                  id: 12,
                  label: "宽带费目录表",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  methods: {
    //删除行
    clearRow(row, index) {
      this.$confirm("确定永久作废这条计费项目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("cost/delCostData", {
              params: {
                id: row.id,
                token: sessionStorage.getItem("token"),
              },
            })
            .then(() => {
              this.getTableData();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //导出
    tableExport() {
      let list = [];
      for (let i = 0; i < this.tableData.length; i++) {
        let arr = [];
        for (let key in this.tableData[i]) {
          arr.push(this.tableData[i][key]);
        }
        list.push(arr);
      }
      downloadXlsx(list, "表格.xlsx");
    },
    //对话框搜索栏重置
    dialogClearForm() {
      this.dialogInline.admin = "";
    },
    //对话框搜索
    dialogSearch() {
      this.$axios
        .get("users/getUserList", {
          params: {
            username: this.dialogInline.admin,
            currPage: this.dialogPageNumber - 1,
            pageNum: this.dialogPageSize,
          },
        })
        .then((res) => {
          this.diaTable = res.data.data;
          this.dialogTotal = res.data.total;
        });
    },
    //对话框通知
    inform() {
      this.$confirm("确定通知改用用户缴费?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("cost/updateCostData", {
              u_id: this.currentRow.id,
              c_id: this.rowId,
              coststatus: 2,
              paystatus: 1,
              username: this.currentRow.username,
              token: sessionStorage.getItem("token"),
            })
            .then((res) => {
              console.log(res, "res");
              this.$message({
                type: "success",
                message: "通知成功!",
              });
              this.getTableData();
              this.dialogVisible = false;
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消通知",
          });
        });
    },
    //单选对话框行
    dialogRowChange(val) {
      console.log(val, "currentrow");
      this.currentRow = val;
    },
    //初始化对话框表格
    getDialogTable() {
      this.$axios
        .get("users/getUserList", {
          params: {
            username: "",
            currPage: this.dialogPageNumber - 1,
            pageNum: this.dialogPageSize,
          },
        })
        .then((res) => {
          console.log(res);
          this.diaTable = res.data.data;
          this.dialogTotal = res.data.total;
        });
    },
    //对话框分页
    dialogSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.dialogPageSize = val;
      this.getDialogTable();
    },
    dialogCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.dialogPageNumber = val;
      this.getDialogTable();
    },
    //对话框打开
    openDialog(row, index) {
      console.log(row, index, "r i");
      this.dialogVisible = true;
      //保存行数据
      this.rowId = row.id;
    },
    //对话框关闭
    handleClose(done) {
      done();
    },
    //跳转缴费订单添加
    detailToAdd(row) {
      this.$router.push({
        path: "/pay/payAdd",
        query: {
          type: "DETAIL",
          id: row.id,
        },
      });
    },
    //跳转缴费订单添加
    addToPayAdd() {
      this.$router.push({
        path: "/pay/payAdd",
        query: {
          type: "Add",
          paystatus: 2,
        },
      });
    },
    //刷新
    reserve() {
      this.formInline.paymoney = "";
      this.formInline.paystatus = "";
      this.getTableData();
    },
    //左侧查询
    onSearch() {
      this.loading = true;
      this.$axios
        .get("cost/getCostData", {
          params: {
            c_id: this.c_id,
            paymoney: this.formInline.paymoney,
            paystatus: this.formInline.paystatus,
            currPage: this.pageNumber - 1,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          // console.log(res,'res')
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.getTableData();
    },
    //初始化表格数据
    getTableData(a, b, c) {
      //   console.log(a, "a");
      this.loading = true;
      if (a == null) {
        // console.log(a, "a");
      } else {
        this.rightTitle = a.label;
        this.c_id = a.id;
      }

      //   console.log(b, "b");
      //   console.log(c, "c");
      this.$axios
        .get("cost/getCostData", {
          params: {
            c_id: this.c_id,
            paymoney: "",
            paystatus: "",
            currPage: this.pageNumber - 1,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          //   console.log(res, "res");
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.loading = false;
        });
    },
  },
  created() {
    this.getTableData();
    this.getDialogTable();
  },
};
</script>
<style lang="scss" scoped>
.paytype ::v-deep {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    width: 30%;
  }
  .right {
    width: 65%;
    .btns {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-top: 40px;
    }
    .table {
      thead {
        tr {
          th {
            font-size: 12px;
            color: black;
            background-color: #e9e9e9;
          }
        }
      }
    }
  }
  .dialog {
    .dia_limWidth {
      display: block;
      width: 150px;
      white-space: nowrap; /* 禁止文本换行 */
      overflow: hidden; /* 隐藏溢出内容 */
      text-overflow: ellipsis; /* 使用省略号表示溢出内容 */
    }
  }
}
</style>